import React from 'react';
import './index.css';
import { Icon } from 'antd';

export default class  extends React.Component {
    constructor(props){
        super();
        this.state={
            startIndex:0,   //图片起始位置
            price:props.price,
            name:props.name,
            type:props.type,
            desc:props.desc
        }
    }

    UNSAFE_componentWillReceiveProps(props){
        this.setState({
            startIndex:0,   //图片起始位置
            price:props.price,
            name:props.name,
            type:props.type,
            desc:props.desc
        })
    }

    //轮播图组件
    render(){
        return (
            <div className="CarouselTicket">
                <div className="CarouselBig_Content">
                    <div className="CarouselBig_Content_Left">
                        <Icon type="arrow-left" />
                    </div>
                    <div className="TicketBody">
                        <div className="TicketBodyPadding">
                            <div className="TicketBody_Left">
                                ￥<span className="TicketBody_LeftPrice">{this.state.price}</span>
                            </div>
                            <div className="TicketBody_Right">
                                <div>
                                    {this.state.name}<br/>
                                </div>
                                <div>
                                    {this.state.type}
                                </div>
                            </div>
                        </div>
                        <div className="TicketBody_Desc">
                            <div className="TicketBodyPadding">
                                {this.state.desc}
                            </div>
                        </div>
                    </div>
                    <div className="CarouselBig_Content_Right">
                        <Icon type="arrow-right" />
                    </div>
                </div>
            </div>
        );
    }
}
